<template>
  <div class="login">
    <div class="logo">
      <img src="@/assets/mzdl.png" />
    </div>
    <van-form validate-first >
      <van-cell-group>
        <van-field
          v-model="userForm.phoneNumber" 
          name="phoneNumber" 
          placeholder="手机号" 
          required 
          clearable 
          :rules="phoneNumberRules">
          <template #button>
            <van-button 
              size="small" 
              :disabled="disabled" 
              @click="sendCode">
              {{ sentText }}
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model="userForm.verCode" 
          name="verCode" 
          placeholder="验证码" 
          required 
          clearable 
          :rules="verCodeRules"/>
      </van-cell-group>
      <div style="margin: 70px 16px 0px">
        <van-button 
          round 
          block 
          color="#ff5f16" 
          @click="login">
          登录
        </van-button>
      </div>
    </van-form>
    <div class="cannt-code">
      <span>收不到验证码</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      userForm: { 
        phoneNumber: "", 
        verCode: "" 
      }, 
      disabled: false, 
      sentText: "发送验证码",
      phoneNumberRules: [
        { 
          validator: this.validateField, 
          message: '请输入正确手机号', 
          trigger: 'onBlur',
          pattern: /1\d{10}/,
          maxLength: 11
        }
      ],
      verCodeRules: [
        {
          validator: this.validateField,
          message: '请输入正确的验证码',
          trigger: 'onBlur',
          pattern: /\d{4}/,
          maxLength: 4
        },
      ]
    };
  },
  methods: {
    validateField(value, rule) {
      return rule.pattern.test(value) && value.length <= rule.maxLength;
    },
    sendCode() {
      if (!this.userForm.phoneNumber) {
        this.$toast({
          type: "warning",
          message: "请先正确输入手机号",
        });
        return;
      }
      
      const phoneNumberRule = this.phoneNumberRules[0];
      if (this.validateField(this.userForm.phoneNumber, phoneNumberRule)) {
        this.disabled = true;
        let num = 60;
        const interval = setInterval(() => {
          num--;
          this.sentText = num + "秒";
          if (num < 0) {
            clearInterval(interval);
            num = 60;
            this.disabled = false;
            this.sentText = "发送验证码";
          }
        }, 1000);
      }
    },
    login() {
      if (!this.userForm.phoneNumber || !this.userForm.verCode) {
        this.$toast({
          type: "warning",
          message: "请输入手机号和验证码",
        });
        return;
      }
      localStorage.setItem("userName", this.userForm.phoneNumber);
      localStorage.setItem("token", this.userForm.phoneNumber);
      this.$router.push("/center");
    },
  }

};
</script>
<style scoped>
.logo {
  margin: 79px auto 40px;
  text-align: center;
  height: 60px;
  line-height: 60px;
}

.logo img {
  height: 60px;
  display: inline-block;
}

.cannt-code {
  text-align: right;
  margin: 15px 25px 0;
  color: #797d82;
  font-size: 13px;
}
</style>
